<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="../../css/plugins/ng-tags-input.min.css" />
    <script src="../../js/bases/angular.min.js"></script>
    <script src="../../js/plugins/ng-tags-input.min.js"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<tags-input ng-model="superheroes"
            placeholder="Add a superhero"
            replace-spaces-with-dashes="false"
            add-from-autocomplete-only="true"
            max-tags="5"
            on-tag-added="tagAdded($tag)"
            on-tag-removed="tagRemoved($tag)">
    <auto-complete source="loadSuperheroes($query)"
                   min-length="0"
                   debounce-delay="0"
                   max-results-to-show="10"></auto-complete>
</tags-input>
<p>Model: {{superheroes}}</p>
<p>Log: {{log}}</p>
</body>

</html>


                